<template>
  <a-table :columns="columns" :pagination="pagination" :dataSource="data" @change="onChange"/>
</template>
<script>
  //用于选择
  const columns = [
    {
      title: '编号',
      dataIndex: 'key',
      // specify the condition of filtering result
      // here is that finding the name started with `value`
    },
    {
      title: '货主',
      dataIndex: 'hzName',
      filters: [
        {
          text: 'Joe',
          value: 'Joe'
        },
        {
          text: 'Jim',
          value: 'Jim'
        },
        {
          text: 'Submenu',
          value: 'Submenu',
          children: [
            {
              text: 'Green',
              value: 'Green'
            },
            {
              text: 'Black',
              value: 'Black'
            }
          ]
        }
      ],
      // specify the condition of filtering result
      // here is that finding the name started with `value`
      onFilter: (value, record) => record.hzName.indexOf(value) === 0,
      sorter: (a, b) => a.hzName.length - b.hzName.length
    }, {
      title: '货物类型',
      dataIndex: 'hwLx',
      filters: [{
        text: 'London',
        value: 'London'
      }, {
        text: 'New York',
        value: 'New York'
      }],
      filterMultiple: false,
      onFilter: (value, record) => record.hwLx.indexOf(value) === 0,
      sorter: (a, b) => a.address.length - b.address.length
    }, {
      title: '货物重量',
      dataIndex: 'hwZl',
      sorter: (a, b) => a.hwZl - b.hwZl
    }, {
      title: '出货时间',
      dataIndex: 'chTime',
      sorter: (a, b) => a.chTime - b.chTime
    }, {
      title: '预期到货时间',
      dataIndex: 'yqDhtime',
      sorter: (a, b) => a.yqDhtime - b.yqDhtime
    }];
  const data = [
    {
      key: 'No.1',
      hzName: 'John Brown',
      hwLx: '水泥',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.2',
      hzName: 'John Brown',
      hwLx: '水泥',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.3',
      hzName: 'John Brown',
      hwLx: '水泥',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.4',
      hzName: 'John Brown',
      hwLx: '水泥',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.5',
      hzName: 'John Brown',
      hwLx: '水泥',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.6',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.7',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.8',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.9',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.10',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.11',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.12',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.13',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.14',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.15',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }, {
      key: 'No.16',
      hzName: 'John Brown',
      hwLx: '砖头',
      hwZl: '1T',
      chTime: '2019-5-4',
      yqDhtime: '2019-5-4',
    }];


  function onChange(pagination, filters, sorter) {
    console.log('params', pagination, filters, sorter)
  }


  export default {
    name: 'AnalysisTable',
    data() {
      return {
        data,
        columns,
        pagination:{
          defaultPageSize:10,
          style:{
            marginRight:'10px',
            marginTop:'12px'
          }
        }
      }
    },
    methods: {
      onChange
    }
  }
</script>
